<template>
<div class="login">
    <div class="login-con">
        <Card icon="log-in" title="欢迎登录" :bordered="false">
            <div class="form-con">
                <LoginForm @on-success-valid="handleSubmit"></LoginForm>
                <p class="login-tip">输入任意用户名和密码即可</p>
            </div>
        </Card>
    </div>
</div>
</template>

<style lang="less">
.login {
    width: 100%;
    height: 100%;
    background-image: url('../assets/images/login-bg.jpg');
    background-size: cover;
    background-position: center;
    position: relative;

    &-con {
        position: absolute;
        right: 160px;
        top: 50%;
        transform: translateY(-60%);
        width: 300px;

        .form-con {
            padding: 10px 0 0;
        }

        .login-tip {
            font-size: 10px;
            text-align: center;
            color: #c3c3c3;
        }
    }
}
</style>

<script>
import {
    mapActions
} from 'vuex'
import LoginForm from '../components/LoginForm'

export default {
    name: 'Login',

    layout: 'normal',

    components: {
        LoginForm
    },

    filters: {},

    props: {},

    data() {
        return {
            captchaId: '',
        }
    },

    computed: {},

    watch: {},

    mounted() {
        this.getCaptchaImg();
        console.log(5234545)
    },

    methods: {
        ...mapActions({
            handleLogin: 'user/handleLogin',
            initCaptcha: 'user/getCaptchaImg',
            getUserInfo: 'user/getUserInfo',
        }),

        async getCaptchaImg() {
            this.captchaId = await this.initCaptcha();
        },

        async handleSubmit({
            username,
            password
        }) {
            await this.handleLogin({
                username,
                password,
                captchaId: this.captchaId,
                code: 'victor'
            })
            await this.getUserInfo()
            this.$router.push({
                path: this.$hconfig.homePath
            })
        }
    }
}
</script>
